<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>李海容-intro</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/fullpage.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/fullpage.min.js"></script>
    <style>
        .portrait{
            display: inline-block;
            width: 120px;
            height: 120px;
            border-radius: 50%;
        }
        @keyframes keyBtn
        {
            0%   {
                transform: translate(-50%,0)
            }
            50%  {
                transform: translate(-50%,-10px)
            }
            100% {
                transform: translate(-50%,0)
            }
        }
        .slideToDemo1{
            font-size: 1.2rem;
            position: absolute;
            bottom: 10%;
            left: 50%;
            animation: keyBtn 1s infinite;
            -webkit-animation: keyBtn 1s infinite;
        }
        .section:nth-of-type(odd){    
            background-color:#FFF;    
        }
        .section:nth-of-type(even){
            background-color:#337ab7;
            color: #FFF;
        }
        .section .jumbotron{
            background-color: inherit;
        }
        .jumbotron{
            max-width: 960px;
            margin: 0 auto;
            overflow: hidden;
        }
        .thumbnail{
            display: inline-block;
            height: 10rem;
        }
        .slide_item{
            position: relative;
            margin: 0 1rem;
        }
        .slide_left{
            left: -100%;
        }
        .slide_right{
            left: 100%;
        }
    </style>
</head>
<body>
    <div id="fullpage">
        <div class="section">
            <div class="jumbotron">
                <p class="slide_item slide_left">
                    <img src="./lhr.png" alt="" class="portrait">
                </p>
                <div class="slide_item slide_right">
                    <p>我的技能，包括但不限于</p>
                    <p>长期使用的：Java、JavaScript、jQuery、ORACLE、HTML、AJAX、SVN</p>
                    <p>偶有使用的：CSS、Less、XML、webservice、git、Photoshop</p>
                    <p>最近在学的：Vue.js、webpack、Node.js</p>
                    <p>我还有一些个人案例，不妨往下看看</p>
                </div>
                <a href="#demo2" class="slideToDemo1">
                    <i class="fa fa-angle-double-down" aria-hidden="true"></i>
                </a>
            </div>
        </div>
        <div class="section" data-anchor="demo2">
            <div class="jumbotron">
                <p class="slide_item slide_left">
                    <img src="./react_phone_news.png" alt="" class="thumbnail">
                </p>
                <p class="slide_item slide_right">移动端优先的手机新闻网站首页，基于react实现</p>
                <p class="slide_item slide_left">
                    <a href="https://kungfupan.gitee.io/reactjs-app-demo" target="_blank" class="btn btn-default btn-lg">前往访问<i class="fa fa-chevron-right"></i></a>
                </p>
            </div>
        </div>
        <div class="section" data-anchor="demo3">
            <div class="jumbotron">
                <p class="slide_item slide_left">
                    <img src="./vue-music.png" alt="" class="thumbnail">
                </p>
                <p class="slide_item slide_right">pc端音乐播放页，基于vue实现，在台式机或笔记本浏览器访问效果会好一些</p>
                <p class="slide_item slide_left">
                    <a href="https://kungfupan.gitee.io/vue-music" target="_blank" class="btn btn-primary btn-lg">前往访问<i class="fa fa-chevron-right"></i></a>
                </p>
            </div>
        </div>
        <div class="section" data-anchor="demo4">
            <div class="jumbotron">
                <p class="slide_item slide_left">
                    <img src="./vue-learning.png" alt="" class="thumbnail">
                </p>
                <p class="slide_item slide_right">基于vue组件开发方法实现的一个树形菜单插件，页面只是模拟了异步树的加载，同样pc端访问效果会好一些</p>
                <p class="slide_item slide_left">
                    <a href="https://kungfupan.gitee.io/vue-learning" target="_blank" class="btn btn-default btn-lg">前往访问<i class="fa fa-chevron-right"></i></a>
                </p>
            </div>
        </div>
    </div>
    <script>
        new fullpage('#fullpage', {
            licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
            anchors:['demo1', 'demo2', 'demo3', 'demo4'],
            fadingEffect: true,
            afterLoad: function(origin, destination, direction){
                $(destination.item).find('.slide_item').animate({
                    'left': 0 
                },600);
            },
            onLeave: function(origin, destination, direction){
                setTimeout(function(){
                    $(origin.item).find('.slide_left').css({
                    'left': '-100%' 
                    });
                    $(origin.item).find('.slide_right').css({
                        'left': '100%' 
                    });
                },300)
            }
        });
        // document.getElementsByClassName('slideToDemo1')[0].onclick=function(){
        //     fullpage_api.moveSectionDown();
        // }

        function setRootFontSize(rootFontSize,windowWidth){
            var fontSize = window.innerWidth/windowWidth*rootFontSize;
            if(window.innerWidth > 960){
                fontSize = 960/windowWidth*rootFontSize;
            }
            document.documentElement.style.fontSize = fontSize + 'px';
        }
        setRootFontSize(30,600);
        window.onresize=function(){
            setRootFontSize(30,600);
        }
        // 测试tortoiseGit
    </script>
</body>
</html>